<template>
	<u-popup :show="showModal" mode="bottom" :round="10" @close="closePop">
		<view class="pop">
			<view class="name" v-if="type == 'name'">
				<image
					:src="`${imgUrl}img/ico/at/20230914/1694658179774.png`"
					class="icon"
				></image>
				<view class="input_box">
					<u-input
						placeholder="请输入"
						color="#333333"
						placeholderClass="placeholderClass"
						shape="square"
						border="none"
						:ignoreCompositionEvent="false"
						:customStyle="style"
						inputAlign="left "
						v-model="myName"
						@input="nameInput"
					>
					</u-input>
				</view>
			</view>
			<view class="sex" v-else-if="type == 'sex'">
				<view
					class="man"
					:class="{ select: mySex == 1 }"
					@click="mySex = 1"
				>
					<image
						:src="
							mySex == 1
								? `${imgUrl}img/ico/at/20230914/1694658124887.png`
								: `${imgUrl}img/ico/at/20230914/1694657955006.png`
						"
						class="icon"
					></image>
					<text class="txt">男</text>
				</view>
				<view
					class="woman"
					:class="{ select: mySex == 2 }"
					@click="mySex = 2"
				>
					<image
						:src="
							mySex == 2
								? `${imgUrl}img/ico/at/20230914/1694658163281.png`
								: `${imgUrl}img/ico/at/20230914/1694658144625.png`
						"
						class="icon"
					></image>
					<text class="txt">女</text>
				</view>
			</view>
			<view class="size" v-else>
				<view class="info">
					<text class="data">{{
						type == 'weight' ? myWeight : myHeight
					}}</text>
					<text class="symbol">
						{{ type == 'weight' ? 'kg' : 'cm' }}</text
					>
				</view>

				<view class="size-container">
					<vueScale
						v-if="type == 'weight' && showModal"
						:min="15"
						:max="200"
						:int="false"
						:single="9"
						:h="h"
						:active="weight > 0 ? weight : defaultWeight"
						:show="showModal"
						:styles="styles"
						@value="horizontaPointWeightMethods"
					>
					</vueScale>
					<vueScale
						v-else-if="type == 'height' && showModal"
						:min="30"
						:max="250"
						:int="true"
						:single="9"
						:h="h"
						:active="height > 0 ? height : defaultHeight"
						:show="showModal"
						:styles="styles"
						@value="horizontaPointHeightMethods"
					>
					</vueScale>
				</view>
			</view>
			<view
				class="handleDate btn-box"
				:style="{
					marginTop:
						type == 'sex' || type == 'name' ? '60rpx' : '176rpx'
				}"
			>
				<view class="close-btn" @click="closePop">取消</view>
				<view class="confirm-btn" @click="confirm">确认</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import vueScale from '@/components/sapling-vue-scale/sapling-vue-scale.vue'
export default {
	props: {
		showModal: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: 'weight'
		},
		weight: {
			type: Number
		},
		height: {
			type: Number
		},
		defaultWeight: {
			type: Number
		},
		defaultHeight: {
			type: Number
		},
		Psex: {
			default: 1
		},
		name: {
			type: String,
			default: '安钛健康'
		},
		top: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			imgUrl: this.$imgUrl,
			styles: {
				bgoutside: '#fafbfe',
				line: '#1F2434',
				lineSelect: 'transparent'
			},
			h: uni.$u.getPx('74rpx', true).split('px')[0],
			myWeight: this.weight,
			myHeight: this.height,
			mySex: this.Psex,
			myName: this.name
		}
	},
	components: {
		vueScale
	},
	methods: {
		horizontaPointWeightMethods(val) {
			if (val < 10) {
				val = 10
			}
			this.myWeight = val
		},
		// 输入框事件
		nameInput(e) {
			let val = uni.$u.trim(e, 'all')
			this.$nextTick(() => {
				this.myName = val.length > 10 ? val.substr(0, 10) : val
			})
		},
		horizontaPointHeightMethods(val) {
			if (val < 30) {
				val = 30
			}
			this.myHeight = val
		},
		confirm() {
			if (this.type == 'weight') {
				this.$emit('sendWeight', this.myWeight)
			} else if (this.type == 'height') {
				this.$emit('sendHeight', this.myHeight)
			} else if (this.type == 'sex') {
				this.$emit('sendSex', this.mySex)
			} else if (this.type == 'name') {
				if (!this.myName) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'error'
					})
				} else {
					this.$emit('sendName', this.myName)
				}
			}
		},
		// 关闭事件
		closePop() {
			this.mySex = this.Psex
			// this.myWeight = this.weight
			// this.myHeight = this.height
			// this.myName = this.name
			this.$emit('close')
		},
		comfirm(info, index) {
			this.$emit('parentSelectMember', info, index)
		}
	}
}
</script>

<style lang="scss">
.pop {
	padding: 144rpx 0 68rpx;

	.name {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid rgba(#000000, 0.1);
		padding: 30rpx 0;
		margin: 160rpx 56rpx 220rpx 56rpx;

		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 24rpx;
		}

		.input_box {
			width: 250rpx;
		}
	}

	.sex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 56rpx;
		margin: 200rpx 0 220rpx 0;

		.man,
		.woman {
			width: 50%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1rpx solid rgba(#000000, 0.1);
			padding: 38rpx 0;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			.txt {
				font-size: 32rpx;
				color: #666666;
			}
		}

		.select {
			border-bottom: 4rpx solid #545dde;
			border-radius: 3rpx;

			.txt {
				color: #545dde;
			}
		}
	}

	.info {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		font-size: 72rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;

		.data {
			line-height: 72rpx;
		}

		.symbol {
			font-size: 32rpx;
			color: #666666;
			padding-left: 16rpx;
		}
	}

	.size-container {
		width: 100%;
		margin-top: 34rpx;
	}
    .btn-box{
        display: flex;
        justify-content:space-around;
        align-items: center;
        .close-btn {
            width: 242rpx;
            height: 76rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #1f2434;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2rpx solid #1f2434;
            border-radius: 46rpx 46rpx 46rpx 46rpx;

        }
        .confirm-btn {
            width: 242rpx;
            height: 76rpx;
            background: #1f2434;
            border-radius: 46rpx 46rpx 46rpx 46rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
